<script setup>

import requestUtil, {api} from "@api/request";
import {onMounted, ref, watch} from "vue";
import {debounce} from "lodash";
import {ElMessage} from "element-plus";
let indexMethod = ref(1);
// 初始化多选状态
let selections = ref([]);
const delBtnStatus = ref(true)
// 表格数据
let tableData = ref([]);
// 总数
let total = ref(0);
const handleSelectionChange = (selection) => {
  // 更新存储选中项的数组
  selections.value = selection
  // 更新批量删除按钮的状态
  delBtnStatus.value = selection.length <= 0
}
// 分页查询
let queryForm = ref({
  query: "",
  pageNum: 1,
  pageSize: 10
});
const handleDelete = async (id) => {
    if(id){
    let res = await api.del(`management/deleteComment/?commentId=${id}`)
    if(res.data.code === 200){
      await getCommentList()
      ElMessage.success("删除成功")
    }
  }else{
    let ids = selections.value.map(item => item.id)
    if(ids.length === 0){
      ElMessage.error("请选择要删除的记录")
      return
    }
    else{
      let res = await api.del(`management/deleteComments/?commentIds=${[ids]}`)
      if(res.data.code === 200){
        await getCommentList()
        ElMessage.success("删除成功")
      }
    }
  }
}
onMounted(() => {
  getCommentList();
});
// 处理每页条数变化
const handleSizeChange = pageSize => {
  queryForm.value.pageNum = 1;
  queryForm.value.pageSize = pageSize;
  getCommentList();
};
// 处理当前页变化
const handleCurrentChange = pageNum => {
  queryForm.value.pageNum = pageNum;
  getCommentList();
};
// 创建一个防抖的搜索函数
const debouncedGetUserInfo = debounce(() => {
  getCommentList();
}, 300);

// 获取用户列表
const getCommentList = async () => {
  let res = await requestUtil.get(
  `management/getCommentList/` +
  `?query=${queryForm.value.query}` +
  `&pageNum=${queryForm.value.pageNum}` +
  `&pageSize=${queryForm.value.pageSize}`
);
  tableData.value = res.data.commentList;
  total.value = res.data.total;
};
// 监听搜索框的变化，并调用搜索函数
watch(() => queryForm.value.query, (newVal, oldVal) => {
  if (newVal !== oldVal) {
    debouncedGetUserInfo();
  }
});
</script>

<template>
  <el-row :gutter="20" class="header">
    <el-col :span="7">
      <!-- 搜索输入框 -->
      <el-input placeholder="请输入店铺名称..." v-model="queryForm.query" clearable></el-input>
    </el-col>
    <!-- 搜索按钮 -->
    <el-popconfirm title="您确定批量删除这些记录吗？" @confirm="handleDelete(null)">
      <template #reference>
        <el-button type="danger" :disabled="delBtnStatus">批量删除</el-button>
      </template>
    </el-popconfirm>
  </el-row>
  <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55" />
    <el-table-column
      type="index"
      :index="indexMethod+((queryForm.pageNum-1)*queryForm.pageSize)"
      label="序号"
      width="100"
      align="center"
    />
<!--    <el-table-column prop="img" width="150" label="图片" align="center">-->
<!--      <template #default="scope">-->
<!--        <img-->
<!--          :src="api.getServerUrl()+'media/store/'+scope.row.img"-->
<!--          alt-->
<!--          style="width: 100px;height: 100px;"-->
<!--        />-->
<!--      </template>-->
<!--    </el-table-column>-->
    <el-table-column prop="storeName" width="150" label="店铺名称" align="center" />
    <el-table-column prop="rate" width="150" label="评分" align="center" />
    <el-table-column prop="content" width="150" label="评论内容" align="center" />
    <el-table-column prop="username" width="200" label="用户名称" align="center" />
    <el-table-column prop="create_time" label="评论时间" width="200" align="center" />
    <el-table-column fixed="right" label="操作" min-width="200" align="center">
      <template #default="scope">
        <el-popconfirm title="您确定删除这条记录吗？" @confirm="handleDelete(scope.row.id)">
          <template #reference>
            <el-button link type="primary" v-show="scope.row.role !== '超级管理员'" size="small">删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    v-model:currentPage="queryForm.pageNum"
    v-model:page-size="queryForm.pageSize"
    :page-sizes="[10, 20, 30, 40]"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

<style scoped>

</style>